<template>
	<u-popup :show="show" mode="center" round="20" :bgColor="proData.apiTypeState == 1 ? '' : 'transparent'" overlayOpacity="0.8">
		<view class="warp" v-if="proData.apiTypeState == 1">
			<view class="rect pands" @tap.stop>
				<view class="title m-b-15">恭喜您，您已获得</view>
				<view class="title bold">{{box.title}})</view>
				<view class="title bold m-b-20">{{box.number}}</view>
				<u--image :src="box.image" width="608rpx" height="608rpx" class="cover"></u--image>
				<view class="f-xl btn text-center bold" @click="close">收下盲盒</view>
			</view>
		</view>
		<view class="warp" v-else>
			<view class="rect" @tap.stop>
				<view class="blinds">
					<view class="blindsTopFont">
						<view class="title">恭喜您获得</view>
						<view class="title bold titleName" style="margin-bottom: 30rpx;">{{proData.name}}#{{proData.token_id}}</view>
					</view>
					<view class="blindCont">
						<view class="blindImg" :style="`background-image: url(${proData.open_gif});`">
							<u--image :src="proData.nft_img_url" width="336rpx" height="336rpx" class="cover"></u--image>
						</view>
					</view>
					<view class="openBtn">
						<view class="f-xl text-center bold openBtnBlindBox" @click="gotoPage()">收下藏品</view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		openBox
	} from '../../../api/collection.js'
	import {
		 mapMutations
	} from 'vuex'
	export default {
		props: {
			show: Boolean,
			proData: Object
		},
		data() {
			return {
				box: {
					title: '',
					number: '',
					image: ''
				}
			}
		},
		created() {
			this.open()
		},
		methods: {
			// onOpenDatas(){
			// 	console.log(113, this.openDatas)
			// },
			...mapMutations(['setGiftType']),
			async open() {
				console.log(12, this.proData)
				try {
					if (this.proData.apiTypeState == 1) {
						const res = await openBox()
						const title = res.data.data.title.split("）")[0]
						const number = `${res.data.data.title.split("）")[1]} ${res.data.data.number}`
						this.box = {
							title,
							number,
							image: res.data.data.image
						}
					} else {}

				} catch (e) {
					console.log(e)
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
				}
			},
			gotoPage(){
				this.setGiftType = true
				this.$emit('onGotoPage')
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.titleName{
		padding: 0rpx 70rpx;
		line-height: 60rpx;
	}
	.blinds {
		position: relative;
		width: 750rpx;
		height: 880rpx;
		.blindCont{
			.blindImg {
				background-size: cover;
				display: flex;
				justify-content: center;
				height: 880rpx;
				align-items: center;
				position: absolute;
				width: 100%;
				// margin: 80rpx 0 120rpx;
				.cover{
				}
			}
		}

		.blindsTopFont {
			z-index: 999;
			color: #ffffff;
			width: 100%;
			text-align: center;
			// position: relative;
			// bottom: 40rpx;
			   position: absolute;
			top: -40rpx;
			.title {
				font-size: 24rpx;
				margin-top: 39rpx;
			}

			.bold {
				background-image: -webkit-linear-gradient(top, #FFFFFF, #BAACDA);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: 44rpx !important;
				margin-top: 20rpx !important;
			}
		}

		.openBtn {
			position: absolute;
			bottom: 0rpx;
			width: 100%;

			.openBtnBlindBox {
				background: linear-gradient(0deg, #FFFFFF, #E1D4FF);
				border-radius: 80rpx;
				padding: 27rpx 0;
				width: 70%;
				margin: auto;
				font-size: 26rpx;
				color: #37226D;
			}
		}

	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.pands {
			padding: 88rpx 120rpx 40rpx !important;
		}

		.rect {
			width: 100%;
			color: #000000;
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.title {
				font-size: 23px;
			}

			.title:first-child {
				margin-top: 30rpx;
			}

			.cover {
				// box-shadow: 3px 8px 30px 1px rgba(255, 255, 255, 0.3);
			}

			.btn {
				width: 430rpx;
				background: #000000;
				border-radius: 40rpx;
				color: #FFFFFF;
				margin: 80rpx 0 50rpx;
				padding: 15rpx 0;
			}
		}
	}
</style>
